<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照护计划算法 - 管理控制台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        .api-method {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
            margin-right: 5px;
        }
        
        .get-method {
            background-color: #e3f2fd;
            color: #0d47a1;
        }
        
        .post-method {
            background-color: #e8f5e9;
            color: #1b5e20;
        }
        
        .dual-method {
            background-color: #fff3e0;
            color: #e65100;
        }
        
        .api-card {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .api-card > div {
            flex: 1;
            background-color: #f9f9f9;
            border-radius: 4px;
            padding: 15px;
        }
        
        .api-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .api-table th, .api-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        .api-table th {
            background-color: #f5f5f5;
        }
        
        .api-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>照护计划算法 - 管理控制台</h1>
            <p>本页面整合了所有API接口，方便进行系统管理和操作</p>
        </header>

        <main>
            <section class="card">
                <h2>系统状态</h2>
                <ul class="api-list">
                    <li><span class="api-method get-method">GET</span><a href="/check_update" target="_blank">检查系统更新状态</a> - 查看系统是否正在更新排班</li>
                    <li><span class="api-method get-method">GET</span><a href="/last_update_time" target="_blank">获取最后更新时间</a> - 查看最后一次排班生成的时间</li>
                </ul>
            </section>

            <section class="card">
                <h2>排班生成</h2>
                <p>生成排班表有两种方式：GET方式会重定向到查看页面，POST方式会返回JSON结果</p>
                
                <div class="api-card">
                    <div>
                        <h3>GET方式生成排班</h3>
                        <p>点击下面的按钮，系统将生成排班并重定向到查看页面</p>
                        <a href="/generate_and_save_schedule" class="button" style="display: inline-block; margin-top: 10px; padding: 8px 15px; background-color: #1976d2; color: white; text-decoration: none; border-radius: 4px;">生成排班(GET)</a>
                    </div>
                    
                    <div>
                        <h3>POST方式生成排班</h3>
                        <p>点击下面的按钮，系统将生成排班并返回JSON结果</p>
                        <button type="button" onclick="generateSchedulePost()" style="margin-top: 10px;">生成排班(POST)</button>
                        <div id="generate-result" style="margin-top: 10px;"></div>
                    </div>
                </div>

                <div class="api-card" style="margin-top: 20px;">
                    <div>
                        <h3>三班排班处理</h3>
                        <p>先生成排班，然后使用此功能进行三班制分配</p>
                        <a href="/three_shift_schedule.html" class="button" style="display: inline-block; margin-top: 10px; padding: 8px 15px; background-color: #43cea2; color: white; text-decoration: none; border-radius: 4px;">三班排班管理</a>
                    </div>
                    
                    <div>
                        <h3>一键生成并处理三班排班</h3>
                        <p>点击下面按钮，直接生成并进行三班制分配</p>
                        <button type="button" onclick="generateAndProcessSchedule()" style="margin-top: 10px; background-color: #43cea2; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer;">一键生成三班排班</button>
                        <div id="shift-generate-result" style="margin-top: 10px;"></div>
                    </div>
                </div>
            </section>

            <section class="card">
                <h2>排班管理</h2>
                <ul class="api-list">
                    <li><span class="api-method get-method">GET</span><a href="/schedule.html" target="_blank">排班管理页面</a> - 查看和生成排班</li>
                    <li><span class="api-method get-method">GET</span><a href="/three_shift_schedule.html" target="_blank">三班排班管理</a> - <span style="color:#e64a19;font-weight:bold;">新功能!</span> 将护理员排班分为三班共24小时</li>
                    <li><span class="api-method get-method">GET</span><a href="/view_schedule" target="_blank">查看所有排班表</a> - 查看所有老人的排班情况</li>
                    <li><span class="api-method get-method">GET</span><a href="/download_all_schedules" target="_blank">下载所有排班表</a> - 将所有排班表导出为ZIP文件</li>
                </ul>
                
                <div class="form-container">
                    <h3>查看特定老人排班</h3>
                    <form id="view-schedule-form" onsubmit="prepareViewSchedule(event)" target="_blank">
                        <div class="form-group">
                            <label for="elder">老人ID:</label>
                            <input type="text" id="elder" name="elder" required>
                        </div>
                        <div class="form-group">
                            <label for="date">日期 (可选):</label>
                            <input type="date" id="date" name="date" onclick="this.showPicker()">
                        </div>
                        <button type="submit">查看</button>
                    </form>
                </div>
                
                <div class="form-container">
                    <h3>下载特定老人排班</h3>
                    <div class="form-group">
                        <label for="elder-download">老人ID:</label>
                        <input type="text" id="elder-download" required>
                    </div>
                    <div class="form-group">
                        <label for="date-download">日期 (可选):</label>
                        <input type="date" id="date-download" onclick="this.showPicker()">
                    </div>
                    <button type="button" onclick="downloadSchedule()">下载</button>
                </div>
            </section>

            <section class="card">
                <h2>护理人员管理</h2>
                <ul class="api-list">
                    <li><span class="api-method get-method">GET</span><a href="/caregivers" target="_blank">获取所有护理人员</a> - 查看所有护理人员及其技能</li>
                </ul>
                
                <div class="form-container">
                    <h3>查看护理人员排班</h3>
                    <div class="form-group">
                        <label for="caregiver-id">护理人员ID:</label>
                        <input type="text" id="caregiver-id" required>
                    </div>
                    <div class="form-group">
                        <label for="caregiver-date">日期 (可选):</label>
                        <input type="date" id="caregiver-date" onclick="this.showPicker()">
                    </div>
                    <button type="button" onclick="viewCaregiverSchedule()">查看</button>
                </div>
                
                <div class="form-container">
                    <h3>更新护理人员可用性</h3>
                    <div class="form-group">
                        <label for="update-caregiver-id">护理人员ID:</label>
                        <input type="text" id="update-caregiver-id" required>
                    </div>
                    <div class="form-group">
                        <label for="update-date">日期:</label>
                        <input type="date" id="update-date" required onclick="this.showPicker()">
                    </div>
                    <div class="form-group">
                        <label for="time-slot">时间段 (0-47):</label>
                        <input type="number" id="time-slot" min="0" max="47" required>
                    </div>
                    <div class="form-group">
                        <label for="is-available">是否可用:</label>
                        <select id="is-available" required>
                            <option value="true">可用</option>
                            <option value="false">不可用</option>
                        </select>
                    </div>
                    <button type="button" onclick="updateAvailability()">更新</button>
                    <div id="update-result" style="margin-top: 10px;"></div>
                </div>
            </section>

            <section class="card">
                <h2>老人管理</h2>
                <ul class="api-list">
                    <li><span class="api-method get-method">GET</span><a href="/elders" target="_blank">获取所有老人</a> - 查看所有需要排班的老人</li>
                </ul>
            </section>

            <section class="card">
                <h2>护理活动管理</h2>
                <ul class="api-list">
                    <li><span class="api-method get-method">GET</span><a href="/nursing_actions" target="_blank">获取所有护理活动</a> - 查看所有可用的护理活动</li>
                </ul>
            </section>

            <section class="card">
                <h2>API文档</h2>
                <p>以下是系统所有API的详细说明，包括支持的请求方法、参数和返回值</p>
                <table class="api-table">
                    <thead>
                        <tr>
                            <th>API路径</th>
                            <th>方法</th>
                            <th>描述</th>
                            <th>参数</th>
                            <th>示例</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>/check_update</td>
                            <td>GET</td>
                            <td>检查系统是否正在更新</td>
                            <td>无</td>
                            <td><a href="/check_update" target="_blank">/check_update</a></td>
                        </tr>
                        <tr>
                            <td>/last_update_time</td>
                            <td>GET</td>
                            <td>获取最后更新时间</td>
                            <td>无</td>
                            <td><a href="/last_update_time" target="_blank">/last_update_time</a></td>
                        </tr>
                        <tr>
                            <td>/generate_and_save_schedule</td>
                            <td><span class="api-method dual-method">GET/POST</span></td>
                            <td>生成排班表并保存到数据库</td>
                            <td>无</td>
                            <td><a href="/generate_and_save_schedule" target="_blank">/generate_and_save_schedule</a></td>
                        </tr>
                        <tr>
                            <td>/process_shift_schedule</td>
                            <td><span class="api-method post-method">POST</span></td>
                            <td>对现有排班进行三班制处理</td>
                            <td>无</td>
                            <td>POST请求，需要通过表单提交</td>
                        </tr>
                        <tr>
                            <td>/generate_and_process_schedule</td>
                            <td><span class="api-method post-method">POST</span></td>
                            <td>一键生成并进行三班制处理</td>
                            <td>无</td>
                            <td>POST请求，需要通过表单提交</td>
                        </tr>
                        <tr>
                            <td>/shift_schedule</td>
                            <td><span class="api-method get-method">GET</span></td>
                            <td>获取三班排班结果</td>
                            <td>无</td>
                            <td><a href="/shift_schedule" target="_blank">/shift_schedule</a></td>
                        </tr>
                        <tr>
                            <td>/view_schedule</td>
                            <td><span class="api-method get-method">GET</span></td>
                            <td>查看排班表</td>
                            <td>elder(可选), date(可选)</td>
                            <td><a href="/view_schedule?elder=3449&date=2025-03-07" target="_blank">/view_schedule?elder=3449&date=2025-03-07</a></td>
                        </tr>
                        <tr>
                            <td>/download_schedule/{elder_id}</td>
                            <td>GET</td>
                            <td>下载特定老人排班表</td>
                            <td>elder_id(路径), date(可选)</td>
                            <td><a href="/download_schedule/3449?date=2025-03-07" target="_blank">/download_schedule/3449?date=2025-03-07</a></td>
                        </tr>
                        <tr>
                            <td>/download_all_schedules</td>
                            <td>GET</td>
                            <td>下载所有排班表</td>
                            <td>date(可选)</td>
                            <td><a href="/download_all_schedules?date=2025-03-07" target="_blank">/download_all_schedules?date=2025-03-07</a></td>
                        </tr>
                        <tr>
                            <td>/caregiver_schedule/{caregiver_id}</td>
                            <td>GET</td>
                            <td>获取护理人员排班</td>
                            <td>caregiver_id(路径), date(可选)</td>
                            <td><a href="/caregiver_schedule/15?date=2025-03-07" target="_blank">/caregiver_schedule/15?date=2025-03-07</a></td>
                        </tr>
                        <tr>
                            <td>/update_caregiver_availability</td>
                            <td>POST</td>
                            <td>更新护理人员可用性</td>
                            <td>caregiver_id, date, time_slot, is_available</td>
                            <td>POST请求，需要通过表单提交</td>
                        </tr>
                        <tr>
                            <td>/nursing_actions</td>
                            <td>GET</td>
                            <td>获取护理动作列表</td>
                            <td>无</td>
                            <td><a href="/nursing_actions" target="_blank">/nursing_actions</a></td>
                        </tr>
                        <tr>
                            <td>/elders</td>
                            <td>GET</td>
                            <td>获取老人列表</td>
                            <td>无</td>
                            <td><a href="/elders" target="_blank">/elders</a></td>
                        </tr>
                        <tr>
                            <td>/caregivers</td>
                            <td>GET</td>
                            <td>获取护理人员列表</td>
                            <td>无</td>
                            <td><a href="/caregivers" target="_blank">/caregivers</a></td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>

        <footer>
            <p>照护计划算法 &copy; 2025</p>
        </footer>
    </div>

    <script>
        // 当DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 设置日期输入框点击事件
            const dateInputs = document.querySelectorAll('input[type="date"]');
            dateInputs.forEach(input => {
                input.addEventListener('click', function() {
                    this.showPicker();
                });
            });
        });
        
        // 准备查看排班表单提交
        function prepareViewSchedule(event) {
            event.preventDefault();
            const elderId = document.getElementById('elder').value;
            const dateInput = document.getElementById('date');
            
            const params = new URLSearchParams();
            params.append('elder', elderId);
            if (dateInput.value) {
                params.append('date', dateInput.value);
            }
            
            window.open(`/view_schedule?${params.toString()}`, '_blank');
        }
        
        // 下载特定老人的排班表
        function downloadSchedule() {
            const elderId = document.getElementById('elder-download').value;
            const date = document.getElementById('date-download').value;
            
            if (!elderId) {
                alert('请输入老人ID');
                return;
            }
            
            let url = `/download_schedule/${elderId}`;
            if (date) {
                url += `?date=${date}`;
            }
            
            window.open(url, '_blank');
        }
        
        // 查看护理人员排班
        function viewCaregiverSchedule() {
            const caregiverId = document.getElementById('caregiver-id').value;
            const date = document.getElementById('caregiver-date').value;
            
            if (!caregiverId) {
                alert('请输入护理人员ID');
                return;
            }
            
            let url = `/caregiver_schedule/${caregiverId}`;
            if (date) {
                url += `?date=${date}`;
            }
            
            window.open(url, '_blank');
        }
        
        // 更新护理人员可用性
        function updateAvailability() {
            const caregiverId = document.getElementById('update-caregiver-id').value;
            const date = document.getElementById('update-date').value;
            const timeSlot = document.getElementById('time-slot').value;
            const isAvailable = document.getElementById('is-available').value === 'true';
            const resultDiv = document.getElementById('update-result');
            
            if (!caregiverId || !date || timeSlot === '') {
                alert('请填写所有必填字段');
                return;
            }
            
            // 准备请求数据
            const data = {
                caregiver_id: caregiverId,
                date: date,
                time_slot: parseInt(timeSlot),
                is_available: isAvailable
            };
            
            resultDiv.innerHTML = '<p style="color: #1565c0;">正在更新，请稍候...</p>';
            
            // 发送POST请求
            fetch('/update_caregiver_availability', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultDiv.innerHTML = `<p style="color: #c62828;">错误: ${data.error}</p>`;
                } else {
                    resultDiv.innerHTML = `<p style="color: #2e7d32;">更新成功!</p>`;
                }
            })
            .catch(error => {
                resultDiv.innerHTML = `<p style="color: #c62828;">请求失败: ${error.message}</p>`;
            });
        }
        
        // 使用POST方式生成排班
        function generateSchedulePost() {
            const resultDiv = document.getElementById('generate-result');
            resultDiv.innerHTML = '<p style="color: #1565c0;">正在生成排班，请稍候...</p>';
            
            fetch('/generate_and_save_schedule', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                resultDiv.innerHTML = `<p style="color: #2e7d32;">排班生成成功！时间: ${data.date}</p>`;
            })
            .catch(error => {
                resultDiv.innerHTML = `<p style="color: #c62828;">生成排班失败: ${error.message}</p>`;
            });
        }

        // 一键生成并处理三班排班
        function generateAndProcessSchedule() {
            const resultDiv = document.getElementById('shift-generate-result');
            resultDiv.innerHTML = '<p style="color: blue;">正在生成三班排班，请稍候...</p>';
            
            // 获取当前日期
            const today = new Date();
            const formatDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
            
            // 发送请求
            fetch('/generate_and_process_schedule', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    start_date: formatDate,
                    period_type: 'day',
                    period_length: 1,
                    shift_start_time: '08:00',
                    day_night_weight: 0.618
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    resultDiv.innerHTML = `<p style="color: red;">生成失败: ${data.error}</p>`;
                } else {
                    resultDiv.innerHTML = `
                        <p style="color: green;">三班排班生成成功!</p>
                        <p>开始日期: ${data.shift_processing.start_date}</p>
                        <p>周期: ${data.shift_processing.config.period_type}</p>
                        <p>长度: ${data.shift_processing.config.period_length}</p>
                        <a href="/three_shift_schedule.html" target="_blank" style="display: inline-block; margin-top: 10px; color: #43cea2;">查看排班结果</a>
                    `;
                }
            })
            .catch(error => {
                resultDiv.innerHTML = `<p style="color: red;">生成失败: ${error.message}</p>`;
            });
        }
    </script>
</body>
</html> 